<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽奖页面</title>

    <link rel="stylesheet" href="/main/css/style.css">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
</head>
<body>
<!--fixed remove-->
<section class="fixed" style="z-index:999;width: 100%;height: 100%;background-color: #000;position: fixed;left: 0;top: 0;"></section>
<!--抽奖页面-->
<section class="lottery_page">
    <img src="/main/img/prize__01.png" width="100%" height="auto">
    <img src="/main/img/prize__02.png" width="100%" height="auto">
    <img src="/main/img/prize__03.png" width="100%" height="auto">
    <img src="/main/img/prize__04.png" width="100%" height="auto">
    <img src="/main/img/prize__05.jpg" width="100%" height="auto">
    <div class="wrap_box">
        <div class="g_lottery_box">
            <div class="g_lottery_img">
            </div>
            <a class="playbtn" href="javascript:;" rel="external nofollow" title="开始抽奖"></a>
        </div>
        <div class="lottery_list">
            <span class="horn"></span>
            <div class="slide-container">
                <ul class="slide-list js-slide-list">
                    <li>恭喜XXXX获得<span class="rand_num">1</span>积分</li>
                    <li>恭喜XXXX获得<span class="rand_num">5</span>积分</li>
                </ul>
            </div>
        </div>
        {%if $user.isluck > 0%}
        <input class="lottery_btn" id="luckbtn" type="button" value="立即抽奖">
        {%else%}
        <input class="lottery_btn gray_btn" type="button" value="立即抽奖">
        {%/if%}
    </div>
</section>
<div class="pop_item pop_prize dno">
    <div class="wrap_item">
        <span class="close"></span>
        <div class="inner_pop">
            <span class="prize_txt"></span>
            <img src="/main/img/ewm.jpg" class="ewm">
        </div>
    </div>
</div>
</body>
<script src="/main/js/jquery-1.12.3.min.js"></script>
<script src="/main/js/jquery.rotate.min.js"></script>
<script src="/main/js/common.js"></script>
<script>
    $(function() {
        checkweichatevent();
        var $btn = $('.g_lottery_img');// 旋转的div
        var isture = 0;//是否正在抽奖
        var clickfunc = function() {
            var data = [2, 2, 3, 4, 5, 3];//抽奖
            //data为随机出来的结果，根据概率后的结果
            data = data[Math.floor(Math.random() * data.length)];//1~6的随机数
            switch(data) {
                case 1:
                    rotateFunc(1, 360, '谢谢参与');
                    break;
                case 2:
                    rotateFunc(2, 60, '抽取1积分');
                    break;
                case 3:
                    rotateFunc(3, 120,'抽取5积分');
                    break;
                case 4:
                    rotateFunc(4, 180, '抽取10积分');
                    break;
                case 5:
                    rotateFunc(5, 240, '抽取50积分');
                    break;
                case 6:
                    rotateFunc(6, 300, '抽取20积分');
                    break;
            }
        }
        var rotateFunc = function(awards, angle, text) {

            isture = true;
            $btn.stopRotate();
            $btn.rotate({
                angle: 0,//旋转的角度数
                duration: 4000, //旋转时间
                animateTo: angle + 1440, //给定的角度,让它根据得出来的结果加上1440度旋转
                callback: function() {
                    isture = false; // 标志为 执行完毕
                    //去字符串中的数字传给后台
                    var reg = /\d+/g;
                    var ms = text.match(reg);
                    var integral_num = ms.join(',');//积分赋值
                    $(".lottery_btn").attr('disabled','disabled');
                    $(".lottery_btn").addClass('gray_btn');
                    $(".pop_prize").fadeIn();
                    $(".pop_prize .prize_txt").text(text);
                    $.ajax({
                        type: "POST",
                        url: "/api/doluck.json",
                        data:{intergtal:integral_num,tk_name:"{%$tk_name%}",tk_value:"{%$tk_value%}"},
                        dataType: 'json',
                        success: function (data) {
                            console.log(data);
                        }
                    });

                }
            });
        };

        $("#luckbtn").on('click',clickfunc);

        /**
         * 关闭奖品弹层
         */
        function closePrizePage(){
            $(".pop_prize").fadeOut();
            refulsh();
        }
        $(".pop_prize .close").on('click',closePrizePage);



        function randomFn(){
            var arr = [1,5,10,50];
            var index = Math.floor((Math.random()*arr.length));
            $(".rand_num").text(arr[index]);
        }
        /**
         * scroll
         */
        var doscroll = function(){
            var $parent = $('.js-slide-list');
            var $first = $parent.find('li:first');
            var height = $first.height();

            $first.animate({
                marginTop: -height + 'px'
            }, function() {
                randomFn();
                $first.css('marginTop', 0).appendTo($parent);
            });
        };
        setInterval(function(){doscroll()}, 2000);
    });
</script>
</html>